<template>
    <div id="Goods">
        <my-breadcrumb/>
         <el-row class="main">
             <!--搜索框 -->
            <el-row>
          <el-col :span="7">
            <search-input/>
          </el-col>
          <!-- 添加商品 -->
          <el-col :span="3" class="margin-left-80" >
             <el-button type="primary" 
                @click="handlyAddgoodsBtn">
                {{btnOption.addBtn.txt}}
            </el-button>
          </el-col>
            </el-row>
            <!-- 表格 -->
            <el-row>
                <my-table-one :tableOptions='tableOptions' :tableData='tableData'>
                    <template #add_time='scope'>
                        <span>{{handlyFormat(scope.slotData.add_time)}}</span>    
                    </template>
                    <template #option='scope'>
                        <div>
                         <el-button type="primary" icon="el-icon-edit" size="mini" @click="handlyEdit(scope.slotData)"></el-button>
                         <el-button class="margin-left-10" type="danger" icon="el-icon-delete" size="mini" @click="handlyDelete(scope.slotData)"></el-button>
                        </div>
                    </template>
                </my-table-one>
            </el-row>
             <!-- 分页 -->
            <el-row>
          <el-col :span="24">
            <my-pagination :pageOption='pageOption'/>
          </el-col>
            </el-row>
        </el-row>
    </div>
</template>
<script>
import {getTime,myMesBoxPop} from "@/utils/comm";
import { Message } from 'element-ui';
export default {
     name:'Goods',
     data() {
        return {
            //表格参数
             tableOptions:[
                {prop:'goods_name',label:'商品名称',width:'650'},
                {prop:'goods_price',label:'商品价格(元)',width:'100'},
                {prop:'goods_weight',label:'商品重量',width:'100'},
                {prop:'add_time',label:'创建时间',width:'150',slot:'add_time'},
                {prop:'option',label:'操作',width:'150',slot:'option'},
            ],
            btnOption:{
                addBtn:{
                    txt:'添加商品',
                },
            },
            tableData: [],
            pageOption:{
                current_page:1,
                page_sizes:[5, 10, 15, 40],
                page_size:100,
                layout:'total, sizes, prev, pager, next, jumper',
                background:false,
                total:0
              },
            }
        },
     watch:{
      '$store.state.goods.paginationData.total':function(newVal,oldVal){
          this.pageOption.total=newVal;
      },
      '$store.state.goods.paginationData.goods':function(newVal,oldVal){
          this.tableData=newVal
          //console.log(this.tableData);
      }
    },
     mounted(){
        //获取商品列表
       this.$store.dispatch('goods/Acs_getGoods')
    },
    methods:{
        //添加商品按钮
        handlyAddgoodsBtn(){
            this.$router.push('/goods/add')
        },
        //编辑按钮
        handlyEdit(row){

        },
        //删除按钮
        handlyDelete(row){
            //console.log(row);
            this.$store.commit('goods/CHANGE_CURRENTROW',row)
            myMesBoxPop(()=>{
                return new Promise((reslove,reject)=>{
                    this.$store.dispatch('goods/Acs_deleteUser')
                    .then(res=>{}).catch(err=>{})
                })
            },()=>{
                Message.info('已取消删除')
            },'此操作将永久删除该商品, 是否继续?')
        },
        //时间戳=>常规
        handlyFormat(item){
            return getTime(item*1000)
            /*  console.log(time);
             console.log(typeof String(item)); */
             
        }
    }
    }
</script>
<style lang="scss" scoped>
    #Goods{
        .main{
            margin-top: 15px;
            background: #fff;
            padding: 20px;
        }
    }
</style>